<template>
  <!--  <div>
      <test></test>
    </div>-->
  <div>
    <Tool></Tool>
  </div>
  <div id="appMain">
    <div>
      <Sidebar @toPage="toPage"></Sidebar>
    </div>
    <div id="header">
      <Header></Header>
    </div>
    <div>
      <!-- leave-active-class="animate__fadeOutDown" -->
      <transition
          name="animate__animated animate__bounce"
          leave-active-class="hide-class"
          enter-active-class="animate__jackInTheBox"
          appear>
          <router-view
              :include="[
                  'MusicList',
                  'Content',
                  'SingerList',
                  'SongSheetList',
                  'SongSheet'
              ]"
              :key="key"
          ></router-view>
<!--        <router-view v-slot="{ Component }">
          <transition>
            <component :is="Component" />
          </transition>
        </router-view>-->
      </transition>
    </div>
    <div>
      <!-- <PlayList></PlayList> -->
      <transition
          name="animate__animated animate__bounce"
          leave-active-class="animate__fadeOutRightBig"
          enter-active-class="animate__fadeInRightBig"
          appear>
        <PlayList
            v-show="isPlayListShow"
            @mouseleave="setPlayListShow(!isPlayListShow)"
            :isUpdatePlayList="isUpdatePlayList"
        ></PlayList>
      </transition>
    </div>
  </div>
</template>

<script>
import "animate.css";
import Sidebar from '@/components/Sidebar'
import SingerList from '@/components/Sidebar/SingerList'
import SongSheetList from "@/components/Sidebar/SongSheetList";
import SongSheet from "@/components/Sidebar/SongSheetList/SongSheet";
import Header from '@/components/Header'
//import Content from '@/components/Content'
import MusicList from '@/components/MusicList'
import Test from '@/components/Test'
//import PlayList from "@/components/Content/PlayList";
import Tool from "@/components/Tool";
import {useRoute, useRouter} from "vue-router";
import {computed, defineAsyncComponent, provide, ref} from "vue";

// 异步组件懒加载
const Content = defineAsyncComponent(() => import(/* webpackChunkName: "Content" */ '@/components/Content'))
const PlayList = defineAsyncComponent(() => import(/* webpackChunkName: "PlayList" */ '@/components/Content/PlayList'))

export default {
  name: 'App',
  components: {
    Tool,
    PlayList,
    Test,
    Sidebar,
    Header,
    Content,
    MusicList,
    SingerList,
    SongSheetList,
    SongSheet,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const toPage = (page) => {
      router.push({
        name: page
      })
    }

    let isPlayListShow = ref(false);
    let isUpdatePlayList = ref(false);

    let key = computed(() => {
      return route.fullPath;
    })

    const setPlayListShow = (bool = true) => {
      // 通知播放列表更新数据
      isUpdatePlayList.value = bool;
      isPlayListShow.value = bool;
    }

    provide('setPlayListShow', setPlayListShow);

    return {
      toPage,
      setPlayListShow,
      isPlayListShow,
      isUpdatePlayList,
      key
    }
  }
}
</script>

<style lang="less">

* {
  // font-family: "思源黑体 Normal", system-ui;
  font-family: "微软雅黑", system-ui;
  margin: 0;
  padding: 0;
}

:root {
  --theme-background-color: #1a1e2a;
  --theme-foreground-color: #252d3a;
  --theme-font-background-color: #7C808C;
  --theme-font-foreground-color: #E6EAEF;
  --theme-font-check-color: #FFFFFF;

  --theme-width: 1280px;
  --theme-height: 920px;

  /*.black {
    --theme-background-color: #1a1e2a;
    --theme-foreground-color: #252d3a;
    --theme-font-background-color: #7C808C;
    --theme-font-foreground-color: #E6EAEF;
    --theme-font-check-color: #FFFFFF;
  }*/

  /*.white {
    --theme-background-color: #f5f6f8;
    --theme-foreground-color: #ffffff;
    --theme-font-background-color: #B1B1B1;
    --theme-font-foreground-color: #1A1A1A;
    --theme-font-check-color: #FF414B;
  }*/

}

body {
  overflow: hidden;
}

#appMain {
  position: relative;
  width: var(--theme-width);
  height: var(--theme-height);
  background-color: var(--theme-background-color);
  border-radius: 0px;

  & > div {
    float: left;
    /*margin-top: 25px;*/
    margin-left: 25px;
  }

  #header {
    margin-top: 10px;
    margin-bottom: 30px;
  }
}

.hide-class {
  display: none;
}

/*.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.v-leave-from,
.v-enter-to {
  opacity: 1;
}*/
</style>
